<template>
  <div class="main">
    <div>
      <div v-if="info">
        <div>
          {{ ipinfo.province }}
          {{ ipinfo.city }}
          {{ ipinfo.district }}
        </div>
        <div>
          天气：
          {{ weather.weather }}
          {{ weather.temperature }}°
        </div>
      </div>
      <div v-else>
        <div>没有获取到信息</div>
      </div>
    </div>

    <div>
      <div v-if="isLogin">
        <ElDropdown @command="handleMenu">
          <!-- {{ user.tbUser.username }} -->

          <div class="logo">
            <ElAvatar :src="Api.getUserLogo(user.tbUser.uid)" shape="circle" />
            <el-icon><Loading /></el-icon>
          </div>
          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem>
                {{ user.tbUserInfo.nickname }}
                ({{ user.tbUser.username }})
              </ElDropdownItem>

              <ElDropdownItem divided command="home"
                ><el-icon><TurnOff /></el-icon> 网络首页
              </ElDropdownItem>

              <ElDropdownItem command="main"
                ><el-icon><Delete /></el-icon>用户首页</ElDropdownItem
              >

              <ElDropdownItem divided command="userpassword"
                ><el-icon><Delete /></el-icon>修改用户密码</ElDropdownItem
              >

              <ElDropdownItem divided command="userlogin"
                ><el-icon><Delete /></el-icon>修改用户头像</ElDropdownItem
              >

              <ElDropdownItem command="userinfo"
                ><el-icon><Delete /></el-icon>修改用户信息</ElDropdownItem
              >

              <ElDropdownItem divided command="userphone"
                ><el-icon><Delete /></el-icon>绑定手机</ElDropdownItem
              >
              <ElDropdownItem command="useremail"
                ><el-icon><Delete /></el-icon>绑定邮箱</ElDropdownItem
              >
              <ElDropdownItem divided command="authk"
                ><el-icon><Delete /></el-icon>开发者信息</ElDropdownItem
              >

              <ElDropdownItem divided command="logout"
                ><el-icon><CloseBold /></el-icon>安全退出
              </ElDropdownItem>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </div>

      <div v-else>
        <el-button @click="router.push('/user/login')">登录</el-button>
      </div>
    </div>
  </div>

  <!-- 绑定邮箱对话框    -->

  <ElDialog v-model="email" title="绑定手机" @closed="update">
    <div>
      <ElForm>
        <ElFormItem label="邮箱">
          <ElInput v-model="emailinfo.email"></ElInput>
        </ElFormItem>

        <ElFormItem label="验证码">
          <ElInput v-model="emailinfo.code"></ElInput>
          <el-button type="primary" @click="useremail">发送验证码</el-button>
        </ElFormItem>
      </ElForm>
    </div>

    <template #footer>
      <ElButton @click="email = false">关闭</ElButton>
      <ElButton type="primary" @click="showpassemail">保存</ElButton>
    </template>
  </ElDialog>

  <!-- 绑定手机对话框 -->
  <ElDialog v-model="phone" title="绑定手机" @closed="update">
    <div>
      <ElForm>
        <ElFormItem label="手机号">
          <ElInput v-model="phoneinfo.phone"></ElInput>
        </ElFormItem>

        <ElFormItem label="验证码">
          <ElInput v-model="phoneinfo.code"></ElInput>
          <el-button type="primary" @click="bindphone">发送验证码</el-button>
        </ElFormItem>
      </ElForm>
    </div>

    <template #footer>
      <ElButton @click="phone = false">关闭</ElButton>
      <ElButton type="primary" @click="showpassword1">保存</ElButton>
    </template>
  </ElDialog>

  <!-- 开发者信息显示框  -->
  <ElDialog v-model="auth" title="开发者信息" @closed="update" width="600px"  style="min-height: 100px;" >
  <ElDescriptions column="1">
    <ElDescriptionsItem label="accessId">{{ authinfo.accessId }}</ElDescriptionsItem>
    <ElDescriptionsItem label="accessKey">{{ authinfo.accessKey }}</ElDescriptionsItem>
  </ElDescriptions>
</ElDialog>

  <!-- 修改密码对话框 -->
  <ElDialog v-model="pvisibe" title="修改用户密码" @closed="update">
    <div>
      <ElForm>
        <ElFormItem label="旧密码">
          <ElInput v-model="puserinfo.oldpwd"></ElInput>
        </ElFormItem>
        <ElFormItem label="新密码">
          <ElInput v-model="puserinfo.newpwd"></ElInput>
        </ElFormItem>
      </ElForm>
    </div>
    <template #footer>
      <ElButton @click="pvisibe = false">关闭</ElButton>
      <ElButton type="primary" @click="showpassword">保存</ElButton>
    </template>
  </ElDialog>

  <!-- 修改用户信息对话框 -->
  <ElDialog v-model="mvisibe" title="修改用户信息" @closed="update">
    <div>
      <ElForm>
        <ElFormItem label="姓名">
          <ElInput v-model="muserinfo.nickname"></ElInput>
        </ElFormItem>

        <ElFormItem label="简历">
          <ElInput v-model="muserinfo.info"></ElInput>
        </ElFormItem>

        <ElFormItem label="QQ">
          <ElInput v-model="muserinfo.qq"></ElInput>
        </ElFormItem>

        <ElFormItem label="微信">
          <ElInput v-model="muserinfo.wechat"></ElInput>
        </ElFormItem>

        <ElRadioGroup label="性别">
          <ElRadioGroup v-model="muserinfo.sex">
            <ElRadio value="m">男</ElRadio>
            <ElRadio value="f">女</ElRadio>
            <ElRadio value="n">保密</ElRadio>
          </ElRadioGroup>
        </ElRadioGroup>
      </ElForm>
    </div>

    <template #footer>
      <ElButton @click="mvisibe = false">关闭</ElButton>
      <ElButton type="primary" @click="modifyUser">保存</ElButton>
    </template>
  </ElDialog>
</template>

<script setup>
//#region  基础导入
import { ref } from 'vue';
import { Api } from '../script/Api';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import ipstore from '../store/ipinfo';
import {
  ElDropdown,
  ElDropdownMenu,
  ElAvatar,
  ElDropdownItem,
  ElMessage,
  ElButton,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadioGroup,
  ElRadio,
} from 'element-plus';
import userstore from '../store/user';
import { Tools } from '../script/Tools';

const { info, ipinfo, weather } = storeToRefs(ipstore());
const { isLogin, user } = storeToRefs(userstore());
const { update } = userstore();
const router = useRouter();

//#endregion

//#region  基础菜单
const handleMenu = (command) => {
  console.log('菜单:', command);
  if (command === 'home') {
    router.push('/');
  } else if (command === 'main') {
    router.push('/user/main');
  } else if (command === 'logout') {
    logout();
  } else if (command === 'userinfo') {
    showModifyUser();
  } else if (command === 'userlogin') {
    modiryUserLogo();
  } else if (command === 'userpassword') {
    showModifyUserPassword();
  } else if (command === 'userphone') {
    showphone();
  } else if (command === 'useremail') {
    showemail();
  } else if (command === 'authk') {
    showauthinfo();
  }
};

//#endregion

//#region 修改用户头像

const modiryUserLogo = () => {
  Tools.browseImage((file) => {
    console.log('选中的文件', file);
    Api.upload('/user/logo', file, {}, (data) => {
      if (data.success) {
        location.reload();
      } else {
        ElMessage.error(data.message);
      }
    });
  });
};

//#endregion

//#region  退出登录

const logout = () => {
  Api.delete('/auth', {}, () => {
    ElMessage.success('安全退出成功');
    update();
  });
};

//#endregion

//#region  修改用户信息
const mvisibe = ref(false);
const muserinfo = ref({});

const showModifyUser = () => {
  //主要相关字段
  muserinfo.value = {
    nickname: user.value.tbUserInfo.nickname,
    sex: user.value.tbUserInfo.sex,
    qq: user.value.tbUserInfo.qq,
    wechat: user.value.tbUserInfo.wechat,
    info: user.value.tbUserInfo.info,
  };
  mvisibe.value = true;
};

const modifyUser = () => {
  Api.put('/user', muserinfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

//#endregion

//#region  修改用户密码

const pvisibe = ref(false);
const puserinfo = ref({});
const showModifyUserPassword = () => {
  puserinfo.value = {
    oldpwd: '',
    newpwd: '',
  };
  pvisibe.value = true;
};

const showpassword = () => {
  Api.patch('/user/password', puserinfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

//#endregion

//#region  绑定手机

const phoneinfo = ref({});
const phone = ref(false);

const showphone = () => {
  phoneinfo.value = {
    phone: '',
    code: '',
  };
  phone.value = true;
};

// 定义发送验证码方法

const bindphone = () => {
  if (!phoneinfo.value.phone) {
    ElMessage.error('请先输入手机号');
    return;
  }
  Api.post('/tools/sendPhoneCode', { phone: phoneinfo.value.phone }, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

const showpassword1 = () => {
  Api.patch('/user/phone', phoneinfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

//#endregion

//#region 绑定邮箱

const email = ref(false);
const emailinfo = ref({});

const showemail = () => {
  emailinfo.value = {
    email: '',
    code: '',
  };
  email.value = true;
};

const useremail = () => {
  if (!emailinfo.value.email) {
    ElMessage.error('请先输入邮箱');
    return;
  }
  Api.post('/tools/sendMailCode', { email: emailinfo.value.email }, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

const showpassemail = () => {
  Api.patch('/user/email', emailinfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};
//#endregion

//#region 开发者信息

const auth = ref(false);
const authinfo = ref({});

const showauthinfo = () => {
  authinfo.value = {
    accessId: user.value.tbUser.accessId,

    accessKey: user.value.tbUser.accessKey,
  };
  auth.value = true;
};

const authuser = () => {
  Api.get('/auth', authinfo.value, (data) => {
    if (data.success) {
      Elmssage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

//#endregion
</script>

<style scoped>
.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}

.logo {
  display: flex;
  align-items: center;
}
</style>
